<template>
  <div id="listselector">
    <div style="border: 1px solid #D3DCE6; width: 280px; height: 300px; overflow: auto;">
      <list-item v-for="(item) in data" :dataProvider="item" @itemClick="itemClickHandler" :key="item"></list-item>
    </div>
    <div style="border: 1px solid #D3DCE6; border-top: none; width: 275px; padding: 5px 0; padding-left: 5px;">
      <i class="el-icon-plus" style="color: #20A0FF;"></i>&nbsp;&nbsp;
      <i class="el-icon-minus" style="color: #FF4949;"></i>
    </div>
    <div style="padding: 10px 0px;">
      已选择:{{currentSelectedItem.label}}
    </div>
  </div>
</template>
<script>
  import ListItem from './ListItem'

  export default {
    name: 'listselector',
    components: {
      ListItem
    },
    data: function () {
      return {
        msg: '',
        currentSelectedItem: {},
        preSelectedItem: {}
      }
    },
    methods: {
      itemClickHandler: function (item) {
        this.preSelectedItem.selected = false;
        this.preSelectedItem = item;
        //      $.each(this.data, function(i, n){
        //        if(n.value !== item.value) {
        //          n.selected = false;
        //        }
        //      });
        // console.log(JSON.stringify(this.data));
      }
    },
    props: {
      data: {
        type: Array,
        default: function () {
          return [];
        }
      }
    },
    mounted: function () {

    }
  }

</script>
<style scoped="scoped">
  ul li {
    list-style: none;
  }

  ul li {
    height: 40px;
    line-height: 40px;
    padding-left: 5px;
    padding-right: 10px;
  }

  .ls-li:hover {
    /*background: #D3DCE6;*/
    cursor: pointer;
  }

  /*ul li:hover .option-btn {
    display: block;
  }*/
  .option-btn {
    float: right;
    display: none;
  }

</style>
